const React = require('react');
const {
  View,
  StyleSheet,
} = require('react-native');
const {
  JDDevice,
  JDImage,
  JDText,
  JDTextCarousel,
  JDRouter,
} = require('@areslabs/jdreact-core-lib');
const { NavigationBar } = JDRouter;

const CAROUSEL_DATA = [
  {
      "userPin": "mm****0000",
      "itemName": "京东E卡经典卡100元面值（电子卡）",
      "itemId": "1200000000000011401",
  },
  {
      "userPin": "jd****0bb9",
      "itemName": "华为 P9 32GB 4G手机",
      "itemId": "1200000000000122801",
  },
  {
      "userPin": "fe****h129",
      "itemName": " iPhone 7 plus 128g ",
      "itemId": "1300000000000119106",
  },
  {
      "userPin": "jd****c90f",
      "itemName": "京东E卡经典卡500面值（电子卡）",
      "itemId": "1800000000000013103",
  },
  {
      "userPin": "wd****gBfh",
      "itemName": " 泰戈凌影支架抄网组合套装",
      "itemId": "1100000000000122704",
  },
  {
      "userPin": "15****7068",
      "itemName": "武极 i5游戏台式电脑主机",
      "itemId": "1200000000000120801",
  },
  {
      "userPin": "宇****2",
      "itemName": "木马智慧 早教益智摇马玩具",
      "itemId": "1600000000000108501",
  },
  {
      "userPin": "jd****d250",
      "itemName": "福儿宝儿童电动车四轮双驱动电瓶汽车",
      "itemId": "1500000000000110404",
  },
  {
      "userPin": "wd****UXvP",
      "itemName": " 53度 飞天茅台 500ml",
      "itemId": "1600000000000118901",
  },
  {
      "userPin": "18****23_p",
      "itemName": "苏泊尔电水壶SWF17K2-180",
      "itemId": "1800000000000104607",
  }];

class JDTextCarouselExample extends React.Component {
  render() {
    return (
      <View style={styles.wrapper}>
        <NavigationBar Title="消息轮播组件" />
        <View style={styles.body}>
          <View style={styles.carouselWrapper}>
            <View style={styles.prefix}>
              <JDImage source={require('./images/icon.png')} style={styles.icon} />
            </View>
            <JDTextCarousel
              renderRow={this._renderRow}
              dataSource={CAROUSEL_DATA}
              style={styles.carousel}
              />
          </View>
        </View>
      </View>
    );
  }

  _renderRow = (rowData) => {
    return (
      <View style={styles.row}>
        <JDText numberOfLines={1} onPress={this._onPress.bind(this, rowData)}>
          <JDText>恭喜</JDText>
          <JDText>{rowData.userPin}</JDText>
          <JDText>抢到</JDText>
          <JDText>{rowData.itemName}</JDText>
        </JDText>
      </View>
    )
  };

  _onPress = (rowData) => {
    alert(rowData.itemId);
  };
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  body: {
    flex: 1,
    padding: JDDevice.getRpx(20),
    backgroundColor: '#EEE'
  },

  carouselWrapper: {
    flexDirection: 'row',
    backgroundColor: '#FFF',
  },
  prefix: {
    width: 30,
    height: 30,
    alignItems: 'center',
    justifyContent: 'center',
  },
  icon: {
    width: JDDevice.getRpx(32),
    height: JDDevice.getRpx(30),
  },
  carousel: {
    flex: 1,
  },
});

module.exports = JDTextCarouselExample;
